<!--
  Generated template for the GroupPage page.

  See http://ionicframework.com/docs/components/#navigation for more info on
  Ionic pages and navigation.
-->
<ion-header>

  <ion-navbar>
    <ion-title>
      <!-- <button class="back" (click)="dismiss()">
            <ion-icon name="ios-arrow-back"></ion-icon>
        </button> -->
      <p text-center>附近圈子</p>
      <button class="release" (click)='showPrompt()'>
        <span>发布</span>
      </button>
    </ion-title>
  </ion-navbar>

</ion-header>


<ion-content>

  <ion-refresher (ionRefresh)="doRefresh($event)">
      <ion-refresher-content
        pullingIcon="arrow-dropdown"
        pullingText="下拉刷新附近圈子.."
        refreshingSpinner="circles"
        refreshingText="缓慢刷新中...">
      </ion-refresher-content>
    </ion-refresher>
  <div *ngIf="ifSuccess">
    <ion-list *ngFor="let item of groupList">
      <ion-card>
        <ion-item>
          <ion-avatar item-start class="photo">
            <img src="{{item.creator.imageURL}}">
          </ion-avatar>
          <p class="user_name">{{item.creator.nickname}}</p>
        </ion-item>

        <ion-card-content>
          <p>{{item.name}}<br /><span style="font-size: 1.2rem">{{item.aim}}</span></p>
        </ion-card-content>

        <div class="bottom_mes clearfix">
          <div class="card_left">
            <p>时间：{{item.date}}</p>
            <p>地点：{{item.location}}</p>
            <p>报名人数：{{item.maxPerson}}人</p>
          </div>
          <div class="card_right">
            <button ion-button id={{item.id}} *ngIf="!item.joined" (click)="joinGroup(item.id)">
              加入
            </button>
            <button ion-button color="light" disabled *ngIf="item.joined">
              已加入
            </button>
          </div>
        </div>
      </ion-card>
    </ion-list>
  </div>
</ion-content>
